const routes = [
    {
        path: '/home',
        component: '<h1>首页内容</h1>'
    },
    {
        path: '/about',
        component: '<h1>关于内容</h1>'
    }
]
const routeView = document.querySelector('#routeView')

const onLoad = () => {
    const links = document.querySelectorAll('li a')

    links.forEach(a => {
        a.addEventListener('click', (e) => {
            e.preventDefault()
            history.pushState(null, '', a.getAttribute('href'))
            console.log(a.getAttribute('href'))
            onPopState()
        })
    })
}
const onPopState = () => {
    routes.forEach((item) => {
        if (item.path === location.pathname) {
            routeView.innerHTML = item.component
        }
    })
}


window.addEventListener('DOMContentLoaded', onLoad)
window.addEventListener('popstate', onPopState)